<template>
  <page-header-wrapper :title="false">
    <a-card>
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-form-item label="选择日期">
                <a-range-picker v-model="queryParam.date" format="YYYY-MM-DD" />
              </a-form-item>
            </a-col>
            <a-col :md="(!advanced && 8) || 24" :sm="24">
              <span
                class="table-page-search-submitButtons"
                :style="(advanced && { float: 'right', overflow: 'hidden' }) || {}"
              >
                <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                <a-button style="margin-left: 8px" @click="() => (queryParam = {})">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <a-row :gutter="48"> 
        <a-col :md="12" :sm="24">
          <a-card title="销售概况">
            <template #extra> ￥0</template>
            <div class="infobox infobox-blue2 btn-like goods-div" v-for="i in saleList" :key="i" @click="handle(queryParam)">
              <div class="infobox-icon">
                <a-icon :type="i.iconType" class="ace-icon" :style="`color:#fff;background-color:${i.color}`"/>
              </div>
              <div class="infobox-data" :style="`color:${i.color}`">
                <span class="infobox-data-number"> <span class="smaller-60" >{{ i.name }}：</span>0 </span>
                <div class="infobox-content orange">￥0</div>
              </div>
            </div>
          </a-card>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-card title="收款统计">
            <template #extra> ￥0</template>
            <div class="infobox infobox-blue infobox-dark btn-like payment-div" v-for="i in Collection" :key="i" :style="`background-color:${i.color} `" @click="handleColleaction()">
              <div class="infobox-progress">
                0%
              </div>
              <div class="infobox-data">
                <div class="infobox-data-number">
                  <span class="smaller-80" style="color:#fff">{{ i.name }}</span>
                </div>
                <div class="infobox-content" style="color:#fff">￥0</div>
              </div>
            </div>
          </a-card>
        </a-col>
        <a-col :md="12" :sm="24" style="margin-top:10px;">
          <a-card title="毛利统计">
            <template #extra> ￥0</template>
            <div class="infobox infobox-blue infobox-dark btn-like payment-div" v-for="i in grossList" :key="i" :style="`background-color:${i.color} `" @click="handle()">
              <div class="infobox-progress">
                0%
              </div>
              <div class="infobox-data">
                <div class="infobox-data-number">
                  <span class="smaller-80" style="color:#fff">{{ i.name }}</span>
                </div>
                <div class="infobox-content" style="color:#fff">￥0</div>
              </div>
            </div>
          </a-card>
        </a-col>
        <a-col :md="12" :sm="24" style="margin-top:10px;">
          <a-card title="支出统计">
            <template #extra> ￥0</template>
            <div class="infobox infobox-blue2 btn-like goods-div" v-for="i in expenditure" :key="i" @click="handleZc()">
              <div class="infobox-icon">
                <a-icon :type="i.iconType" class="ace-icon" :style="`color:#fff;background-color:${i.color}`"/>
              </div>
              <div class="infobox-data" :style="`color:${i.color}`">
                <span class="infobox-data-number"> <span class="smaller-60" >{{ i.name }}：</span>0 </span>
                <div class="infobox-content orange">￥0</div>
              </div>
            </div>
          </a-card>
        </a-col>
        <a-col :md="12" :sm="24" style="margin-top:10px;">
          <a-card title="会员跟进">
            <template #extra> ￥0</template>
            <div class="infobox infobox-blue2 btn-like goods-div" v-for="i in member" :key="i" @click="handleMember()">
              <div class="infobox-icon">
                <a-icon :type="i.iconType" class="ace-icon" :style="`color:#fff;background-color:${i.color}`"/>
              </div>
              <div class="infobox-data" :style="`color:${i.color}`">
                <span class="infobox-data-number"> <span class="smaller-60" >{{ i.name }}：</span>0 </span>
                <div class="infobox-content orange">￥0</div>
              </div>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import {
  MiniProgress,
} from '@/components'
export default {
  name: 'DayReportDetails',
  components: {
    MiniProgress,
  },
  data() {
    return {
      mdl: null,
      visible: false,
      value4:'',
      confirmLoading:false,
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      pagination:{
        total: 0
      },
      loading: false,
      queryParam: {
        pageNo:1,
        pageSize:10, 
        buyType:1,
        date: [ moment().startOf('months').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD') ],
        storeId:this.$route.params.id,
        queryCondition:'',
        status:''
      },
      saleList:[{
        name:'手机销量',
        iconType:'gift',
        color:'#3983c2'
      },{
        name:'配件信息',
        iconType:'gift',
        color:'#D53F40'
      },{
        name:'智能家居销量',
        iconType:'gift',
        color:'#C67A3E'
      },{
        name:'测试一级分类销量',
        iconType:'gift',
        color:'#5F47B0'
      },{
        name:'测试001销量',
        iconType:'gift',
        color:'#7B3F25'
      },{
        name:'111销量',
        iconType:'gift',
        color:'#E8B110'
      },{
        name:'修改分类0销量',
        iconType:'gift',
        color:'#3983c2'
      },{
        name:'运营商业务',
        iconType:'dribbble',
        color:'#C67A3E'
      },{
        name:'新增收入',
        iconType:'dollar',
        color:'#D53F40'
      },{
        name:'售后业务',
        iconType:'tool',
        color:'#5F47B0'
      },{
        name:'收预付款',
        iconType:'plus',
        color:'#E8B110'
      },{
        name:'回收退货',
        iconType:'plus',
        color:'#E8B110'
      },{
        name:'优品销售',
        iconType:'tool',
        color:'#5F47B0'
      }],
      expenditure:[{
        name:'新增支出',
        iconType:'dollar',
        color:'#9ABC32'
      },{
        name:'退预付款',
        iconType:'minus',
        color:'#3983c2'
      },],
      member:[{
        name:'销售总订单',
        iconType:'dollar',
        color:'#D53F40'
      },{
        name:'会员订单',
        iconType:'user',
        color:'#3983c2'
      },{
        name:'生日数据',
        iconType:'gift',
        color:'#5F47B0'
      },{
        name:'微信绑定',
        iconType:'wechat',
        color:'#9ABC32'
      },{
        name:'会员卡激活',
        iconType:'credit-card',
        color:'#3983c2'
      },{
        name:'复购数',
        iconType:'user',
        color:'#5F47B0'
      },],
      Collection:[{
          name:'现金',
          color:'#6FB3E0'
        },
        {
          name:'刷卡',
          color:'#9ABC32'
        },
        {
          name:'转账',
          color:'#3983C2'
        },
        {
          name:'分期',
          color:'#E8B110'
        },
        {
          name:'网银',
          color:'#5F47B0'
        },
        {
          name:'积分',
          color:'#C67A3E'
        },
        {
          name:'预付款',
          color:'#7B3F25'
        },
        {
          name:'欠账',
          color:'#D53F40'
        },
      ],
      grossList:[{
          name:'手机',
          color:'#6FB3E0'
        },
        {
          name:'配件',
          color:'#9ABC32'
        },
        {
          name:'智能家居',
          color:'#3983C2'
        },
        {
          name:'测试一级分类',
          color:'#E8B110'
        },
        {
          name:'测试001',
          color:'#5F47B0'
        },
        {
          name:'111',
          color:'#C67A3E'
        },
        {
          name:'修改分类001',
          color:'#7B3F25'
        },
        {
          name:'运营商业务',
          color:'#D53F40'
        },{
          name:'售后业务',
          color:'#6FB3E0'
        },
      ],
    }
  },
  methods: {
    handleMember(){
      this.$router.push({ path: `/report/dayReport/memberList/1` })
    },
    handleZc(){
      this.$router.push({ path: `/cashier/paymentRecord/1` })
    },
    handleColleaction(){
      this.$router.push({ path: `/report/dayReport/collectionStatic/1` })
    },
    handle(){
      this.$router.push({ path: `/report/dayReport/order/1`})
    },
  },
}
</script>
<style lang="less" scoped>
.btn-like {
  cursor: pointer;
  padding: 8px 3px 6px 9px;
}
.infobox-blue2 {
  color: #3983c2;
  border-color: #3983c2;
}
.infobox {
  display: inline-block;
  width: 210px;
  height: 66px;
  color: #555;
  background-color: #fff;
  box-shadow: none;
  margin: -1px 0 0 -1px;
  padding: 8px 3px 6px 9px;
  border: 1px dotted;
  border-color: #d8d8d8 !important;
  vertical-align: middle;
  text-align: left;
  position: relative;
}
.infobox > .infobox-icon {
  display: inline-block;
  vertical-align: top;
  width: 44px;
}
.infobox > .infobox-icon > .ace-icon {
  display: inline-block;
  height: 42px;
  margin: 0;
  padding: 1px 1px 0 2px;
  background-color: transparent;
  border-width: 0;
  text-align: center;
  position: relative;
  border-radius: 100%;
  -webkit-box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}
.infobox > .infobox-data {
  display: inline-block;
  border-width: 0;
  font-size: 13px;
  text-align: left;
  line-height: 21px;
  min-width: 130px;
  padding-left: 8px;
  position: relative;
  top: 0;
}
.infobox > .infobox-data > .infobox-data-number {
  display: block;
  font-size:18px;
  margin: 2px 0 4px;
  position: relative;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.15);
}
.smaller-60 {
  font-size: 80% !important;
}
.infobox > .infobox-data > .infobox-data-number {
  display: block;
  font-size: 18px;
  margin: 2px 0 4px;
  position: relative;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.15);
}
.infobox > .infobox-data {
  display: inline-block;
  border-width: 0;
  font-size: 13px;
  text-align: left;
  line-height: 21px;
  min-width: 130px;
  padding-left: 8px;
  position: relative;
}
.infobox-blue2>.infobox-icon>.ace-icon{
  background-color: #3983C2;
}
.infobox>.infobox-icon>.ace-icon:before{
  font-size: 24px;
    display: block;
    padding: 6px 0 7px;
    width: 40px;
    text-align: center;
    border-radius: 100%;
    color: #FFF;
    text-shadow: 1px 1px 1px rgba(0,0,0,.14);
}
.infobox>.infobox-icon>.ace-icon{
  display: inline-block;
    height: 42px;
    font-size: 24px;
    line-height: 42px;
    width: 42px;
    margin: 0;
    padding: 1px 1px 0 2px;
    border-width: 0;
    text-align: center;
    position: relative;
    border-radius: 100%;
    -webkit-box-shadow: 1px 1px 0 rgba(0,0,0,.2);
    box-shadow: 1px 1px 0 rgba(0,0,0,.2);
}
.infobox .infobox-content{
  color: #555;
    max-width: 140px;
}
.orange{
  color:#FF892A!important;
}
.infobox-dark{
  margin: 1px 1px 0 0;
    border-color: transparent!important;
    border-width: 0;
    color: #FFF;
    padding: 10px;
}
.infobox>.infobox-progress{
  padding-top: 0;
    display: inline-block;
    vertical-align: top;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: url('../../../assets/1.png') no-repeat;
}

</style>